<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择城市</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <!--<link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">-->
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>
    <style>

    </style>
    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.min.js' charset='utf-8'></script>
    <!--<script type="text/javascript" src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>-->
    <script type="text/javascript" src='../js/libs/sui/sm-city-picker.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<div class="page">
    <!-- 标题栏 -->
    <header class="bar bar-nav">
        <a class="icon iconfont c-white pull-left" onclick="javascript:api.closeWin();">&#xe61f;</a>
        <!--<a class="icon icon-refresh pull-right"></a>-->
        <h1 class="title">选择城市</h1>
    </header>
    <!-- 这里是页面内容区 -->
    <div class="content location">
        <!--<div class="head-no-toolbar no-left-icon">-->
            <!--<span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>-->
            <!--<span class="c-white t-center">选择城市</span>-->
        <!--</div>-->
        <div class="searchbar row bg-white">
            <div class="search-input col-85">
                <input id="search" type="search" placeholder="请输入城市……"/>
            </div>
            <a id="search_btn" class="button button-fill button-success col-15">
                <span class="icon iconfont icon-sousuo"></span>
            </a>
        </div>
        <div class="searchResult">
            <div class="list-block contacts-block m-0 p-b-0 f-time">
                <div class="list-group m-t-0">
                    <ul id="search_city_list">
                        <!--
                        <li class="item-search">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">安顺市</div>
                                </div>
                            </div>
                        </li>
                        -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="allResult">
            <div class="guizhou">
                <div id="city_list" class="list-block contacts-block">
                    <!--
                    <div class="list-group">
                        <div class="provinceTitle">
                            <span>贵州省</span>
                            <span class="icon iconfont icon-iconjian c-green1 f-little"></span>
                        </div>
                        <ul>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">贵阳市</div>
                                    </div>
                                </div>
                            </li>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">毕节市</div>
                                    </div>
                                </div>
                            </li>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">安顺市</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list-group">
                        <div class="provinceTitle">
                            <span>贵州省</span>
                            <span class="icon iconfont icon-tianjia c-green1 f-little"></span>
                        </div>
                        <ul>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">贵阳市</div>
                                    </div>
                                </div>
                            </li>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">毕节市</div>
                                    </div>
                                </div>
                            </li>
                            <li class="f-time">
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">安顺市</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    -->
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 搜索城市列表模版 -->
<script id="search_city_list_tpl" type="text/template">
    {@each searchCityList as it, index}
    <li class="item-search" data-area-code="&{it.AREA_CODE}" data-province="&{it.PROVINCE}"  data-city="&{it.CITY}">
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title">&{it.CITY}</div>
            </div>
        </div>
    </li>
    {@/each}
</script>

<!-- 城市列表模版 -->
<script id="city_list_tpl" type="text/template">
    {@each cityList as it1, index1}
        {@if index1 == 0}
        <div class="list-group">
            <div class="provinceTitle">
                <span>&{it1.PROVINCE}</span>
                <span class="icon iconfont icon-iconjian c-green1 f-little"></span>
            </div>
            <ul>
                {@if it1.SUB.length == 0}
                <li class="f-time" data-area-code="&{it1.AREA_CODE}" data-province="&{it1.PROVINCE}" data-city="&{it1.CITY}">
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">&{it1.CITY}</div>
                        </div>
                    </div>
                </li>
                {@else}
                    {@each it1.SUB as it2, index2}
                    <li class="f-time" data-area-code="&{it2.AREA_CODE}" data-province="&{it1.PROVINCE}" data-city="&{it2.CITY}">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">&{it2.CITY}</div>
                            </div>
                        </div>
                    </li>
                    {@/each}
                {@/if}
            </ul>
        </div>
        {@else}
        <div class="list-group">
            <div class="provinceTitle">
                <span>&{it1.PROVINCE}</span>
                <span class="icon iconfont icon-tianjia c-green1 f-little"></span>
            </div>
            <ul>
                {@if it1.SUB.length == 0}
                <li class="f-time" data-area-code="&{it1.AREA_CODE}" data-province="&{it1.PROVINCE}"  data-city="&{it1.CITY}">
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">&{it1.CITY}</div>
                        </div>
                    </div>
                </li>
                {@else}
                    {@each it1.SUB as it2, index2}
                    <li class="f-time" data-area-code="&{it2.AREA_CODE}" data-province="&{it1.PROVINCE}" data-city="&{it2.CITY}">
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title">&{it2.CITY}</div>
                            </div>
                        </div>
                    </li>
                    {@/each}
                {@/if}
            </ul>
        </div>
        {@/if}
    {@/each}
</script>

<script type="text/javascript">
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        //***********************前端*************************/
        $("#city_list").on("click", ".provinceTitle", function() {
            if($(this).next("ul").css("display")=="none"){
                $(this).next("ul").slideDown("fast")
                        .end().find(".icon")
                        .addClass("icon-iconjian")
                        .removeClass("icon-tianjia");
                $(".allResult .provinceTitle").not($(this))
                        .find(".icon").removeClass("icon-iconjian").addClass("icon-tianjia")
                        .parent(".provinceTitle")
                        .next("ul").slideUp("fast");
            }else{
                $(this).next("ul").slideUp("fast")
                        .end().find(".icon").addClass("icon-tianjia")
                        .removeClass("icon-iconjian");
            }
        });
        //***********************前端*************************/

        //***********************[后端]*************************/
        var $search = $("#search");
        // 缓存中的所有城市
        var cacheCitys = null;

        getCitys(function(citys) {
            if (isArray(citys)) {
                var cityData = {
                    url : getUrl(),
                    cityList : citys
                };

                cacheCitys = citys;

                $("#city_list").html(juicer($("#city_list_tpl").html(), cityData));
            }
        });

        // 点击搜索城市
        $("#search_btn").click(function() {
            if (isArray(cacheCitys)) {
                if (isEmpty($search.val())) {
                    toast("请输入城市");

                    $search.focus();

                    return;
                }

                // 城市搜索结果
                var searchCitys = new Array();
                // 搜索关键字
                var keyword = $search.val();

                // 搜索城市
                $.each(cacheCitys, function(i1, c1) {
                    // 没有城市，如：香港特别行政区
                    if (c1.SUB.length == 0) {
                        if (isNotEmpty(c1.CITY) && (c1.CITY.indexOf(keyword) != -1)) {
                            searchCitys.push(c1);
                        }

                        // 有城市
                    } else {
                        $.each(c1.SUB, function(i2, c2) {
                            if (isNotEmpty(c2.CITY) && (c2.CITY.indexOf(keyword) != -1)) {
                                searchCitys.push(c2);
                            }
                        });
                    }
                });

                var searchCityData = {
                    url : getUrl(),
                    searchCityList : searchCitys
                };

                $("#search_city_list").html(juicer($("#search_city_list_tpl").html(), searchCityData));

            } else {
                toast("暂无城市数据，稍后再试");
            }
        });

        // 点击选择搜索的城市
        $("#search_city_list").on("click", ".item-search", function() {
            var $this = $(this);

            // 发送选择城市的事件
            api.sendEvent({
                name : "selectCityEvent",
                extra : {
                    areaCode : $this.data("areaCode"),
                    province : $this.data("province"),
                    city : $this.data("city")
                }
            });

            closeWin();
        });

        // 点击选择城市
        $("#city_list").on("click", ".f-time", function() {
            var $this = $(this);

            // 发送选择城市的事件
            api.sendEvent({
                name : "selectCityEvent",
                extra : {
                    areaCode : $this.data("areaCode"),
                    province : $this.data("province"),
                    city : $this.data("city")
                }
            });

            closeWin();
        });
        //***********************[/后端]*************************/
    };
</script>
</body>
</html>
